import React, { Component } from 'react';
import '../styles/Classify.scss'
import pic1 from '../image/cat.jpg'
import pic2 from '../image/pic2.jpg'
import pic3 from '../image/pic3.jpg'
import pic4 from '../image/pic4.jpg'
import pic5 from '../image/pic5.jpg'
import pic6 from '../image/pic6.jpg'
class Classify extends Component {
    constructor(props) {
        super(props);
        this.state = {
            classificationList: [
                {
                    name: '活动专区',
                    classificationList1: [
                        {
                            name: '活动',
                            classificationList2: [
                                { img: pic1, text: '卸妆' },
                                { img: pic2, text: '洁面' },
                                { img: pic3, text: '爽肤水' },
                                { img: pic4, text: '乳液' },
                                { img: pic5, text: '精油' },
                                { img: pic6, text: '面霜' },
                            ]
                        }
                    ]
                },
                {
                    name: '品牌',
                    classificationList1: [
                        {
                            name: '品牌',
                            classificationList2: [
                                { img: pic1, text: '爱马仕' },
                                { img: pic2, text: '马自达' },
                                { img: pic3, text: '埃迪' },
                                { img: pic4, text: '奥迪' },
                                { img: pic5, text: '斑马' },
                                { img: pic6, text: '炉子' },
                            ]
                        }
                    ]
                },
                {
                    name: '美容护肤',
                    classificationList1: [
                        {
                            name: '美容',
                            classificationList2: [
                                { img: pic1, text: '卸妆水' },
                                { img: pic2, text: '洁面乳' },
                                { img: pic3, text: '画手双' },
                                { img: pic4, text: '粉饼' },
                                { img: pic5, text: '精油' },
                                { img: pic6, text: '面霜' },
                            ]
                        }
                    ]
                },
                {
                    name: '彩妆',
                    classificationList1: [
                        {
                            name: '彩妆',
                            classificationList2: [
                                { img: pic1, text: '刷子' },
                                { img: pic2, text: '擦擦' },
                                { img: pic3, text: '水乳' },
                                { img: pic4, text: '精油' },
                                { img: pic5, text: '夹子' },
                                { img: pic6, text: '耳坠' },
                            ]
                        }
                    ]
                },
                {
                    name: '香水',
                    classificationList1: [
                        {
                            name: '香水',
                            classificationList2: [
                                { img: pic1, text: '古龙' },
                                { img: pic2, text: '大宝' },
                                { img: pic3, text: '青蛙王子' },
                                { img: pic4, text: '乳液' },
                                { img: pic5, text: '精油' },
                                { img: pic6, text: '面霜' },
                            ]
                        }
                    ]
                },
                {
                    name: '酒类',
                    classificationList1: [
                        {
                            name: '酒类',
                            classificationList2: [
                                { img: pic1, text: '西风' },
                                { img: pic2, text: '茅台' },
                                { img: pic3, text: '五粮液' },
                                { img: pic4, text: '泸州' },
                                { img: pic5, text: '十年' },
                                { img: pic6, text: '华山论剑' },
                            ]
                        }
                    ]
                },
                {
                    name: '腕表首饰',
                    classificationList1: [
                        {
                            name: '腕表',
                            classificationList2: [
                                { img: pic1, text: '' },
                                { img: pic2, text: '洁面' },
                                { img: pic3, text: '爽肤水' },
                                { img: pic4, text: '乳液' },
                                { img: pic5, text: '精油' },
                                { img: pic6, text: '面霜' },
                            ]
                        }
                    ]
                },
                {
                    name: '服饰箱包',
                    classificationList1: [
                        {
                            name: '服饰',
                            classificationList2: [
                                { img: pic1, text: '卸妆' },
                                { img: pic2, text: '洁面' },
                                { img: pic3, text: '爽肤水' },
                                { img: pic4, text: '乳液' },
                                { img: pic5, text: '精油' },
                                { img: pic6, text: '面霜' },
                            ]
                        }
                    ]
                },
                {
                    name: '食品保健',
                    classificationList1: [
                        {
                            name: '食品',
                            classificationList2: [
                                { img: pic1, text: '卸妆' },
                                { img: pic2, text: '洁面' },
                                { img: pic3, text: '爽肤水' },
                                { img: pic4, text: '乳液' },
                                { img: pic5, text: '精油' },
                                { img: pic6, text: '面霜' },
                            ]
                        }
                    ]
                },
            ],
            cuurrnntindex: 0
        }
    }
    btnclick(index){
        this.setState({cuurrnntindex:index})
    }
    render() {
        return (
            <div className='Classify'>
                   <div className="btns">
                {
                    this.state.classificationList.map((item, index) => {
                        return (
                            <div className={'btn ' + (this.state.cuurrnntindex == index ? 'active' : '')} onClick={() => { this.btnclick(index) }}>{item.name}</div>
                        )
                    })
                    
                }
                </div>
                <div className="rigth">
                    {
                        this.state.classificationList[this.state.cuurrnntindex].classificationList1.map((item2,index)=>{
                            return (
                                <div className='list2' key={index}>
                                    <h3>{item2.name}</h3>

                                    <div className='list3'>
                                        {
                                            item2.classificationList2.map((item3,index)=>{
                                                return (
                                                    <div className='item3' key={index}>
                                                        <img src={item3.img} alt="" />
                                                        <div className='name'>{item3.text}</div>
                                                    </div>
                                                )
                                            })
                                        }
                                    </div>
                                </div>
                                
                            )
                        })
                    }
                </div>
            </div>
        );
    }
}

export default Classify;